<template>
    <div class="WorkingSchedule" v-loading="loading">
        <el-form ref="form" :model="form" label-position="top" class="myform">
            <div>
                <el-form-item label="绣花厂" class="myform-item">
                    <el-select v-model="form.supplier_id" placeholder="请选择" clearable @keyup.enter.native="onSearch">
                        <el-option v-for="item in factoryList" :key="item.supplier_id" :label="item.factory_name" :value="item.supplier_id"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="对账单 年/月" class="myform-item">
                    <el-date-picker v-model="form.recon_time" type="month" value-format="yyyy-MM" placeholder="选择月" @keyup.enter.native="onSearch"></el-date-picker>
                </el-form-item>
                <el-form-item label="对账单状态:" class="myform-item">
                    <el-select v-model="form.status" placeholder="请选择" clearable>
                        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
                    </el-select>
                </el-form-item>
<!--                <el-form-item label="审核状态:" class="myform-item">-->
<!--                    <el-select v-model="form.flow_status" placeholder="请选择" clearable>-->
<!--                        <el-option v-for="item in optionsSP" :key="item.value" :label="item.label" :value="item.value"></el-option>-->
<!--                    </el-select>-->
<!--                </el-form-item>-->
                <el-form-item label="付款状态:" class="myform-item">
                    <el-select v-model="form.pay_status" placeholder="请选择" clearable>
                        <el-option v-for="item in optionspay" :key="item.value" :label="item.label" :value="item.value"></el-option>
                    </el-select>
                </el-form-item>
            </div>
            <div>
                <el-form-item style="margin-top: 50px" class="myform-item">
                    <el-button type="primary" @click="onSearch">查询</el-button>
                </el-form-item>
                <el-form-item style="margin-top: 50px">
                    <el-button type="primary" @click="onNewReconciliation">新建对账单</el-button>
                </el-form-item>
            </div>
        </el-form>
        <el-table :data="tableData" style="width: 100%" border>
            <el-table-column label="创建人" align="center" prop="adduser" width="100px"></el-table-column>
            <el-table-column label="品牌" align="center" prop="source_factory_groups_id" width="90px">
                <template slot-scope="scope">
                    <div>
                        {{scope.row.source_factory_groups_id == 3090235 ? "十三余" : (scope.row.source_factory_groups_id == 10010 ? "有香" :  "")}}
                    </div>
                </template>
            </el-table-column>
            <el-table-column label="绣花厂" align="center" prop="factory_name"></el-table-column>
            <el-table-column label="年/月" align="center" prop="recon_time" width="100px"></el-table-column>
            <el-table-column label="创建时间" align="center" prop="createtime" width="160px"></el-table-column>
            <el-table-column label="应付金额" align="center" prop="pay_amount"></el-table-column>
            <el-table-column label="付款凭证" align="center" prop="pay_images">
                <template slot-scope="scope">
                    <el-image v-if="scope.row.pay_images" :src="scope.row.pay_images" fit="fill" :lazy="true" :preview-src-list="[scope.row.pay_images]"></el-image>
                </template>
            </el-table-column>
            <el-table-column label="对账单状态" align="center" prop="status">
                <template slot-scope="scope">
                    <div :style="{color:scope.row.status == 1? '#67C23A': (scope.row.status == 2 || scope.row.status == 3? 'red': '')}">
                        {{scope.row.status == 0 ? "待审核" : (scope.row.status == 1 ? "已通过" : (scope.row.status == 2 ? "未通过" : (scope.row.status == 3 ? "已作废" : "")))}}
                    </div>
                </template>
            </el-table-column>
            <el-table-column label="推送金蝶" align="center" prop="status">
                <template slot-scope="scope">
                    <span :style="{color:scope.row.is_push == 1? '#67C23A': '#909399'}">
                        {{scope.row.is_push == 1? '已推送' : '未推送'}}
                    </span>
<!--                    <div :style="{color:row.flow_status == 2? '#67C23A': row.flow_status == 3? 'red': '',}">-->
<!--                        {{row.flow_status == 1 ? "审批中" : row.flow_status == 2 ? "已通过" : row.flow_status == 3 ? "未通过" : "" }}-->
<!--                    </div>-->
<!--                    <div>-->
<!--                        <el-button type="text" size="default" @click="onLookRun(row.id, 7, row.run_id)" v-if="row.run_id">审批进度</el-button>-->
<!--                    </div>-->
                </template>
            </el-table-column>
            <el-table-column label="付款状态" align="center" prop="status">
                <template slot-scope="scope">
                    <div :style="{color: scope.row.pay_status == 1 ? '#67C23A' : '#909399'}">
                        {{scope.row.pay_status == 1 ? "已付款" : "未付款"}}
                    </div>
                </template>
            </el-table-column>
            <el-table-column label="操作" align="center">
                <template slot-scope="scope">
                    <el-button type="text" @click="onPay(scope.row.id)" v-if="scope.row.status == 1 && scope.row.pay_status != 1 && qxobj.pay">付款</el-button>
                    <el-button type="text" v-if="scope.row.is_push!=1 && scope.row.status == 1 && qxobj.pay" @click="pushReconciliationBtn(scope.$index, scope.row)"
                               :loading="selectIndex==scope.$index && pushLoading">推送</el-button>
                    <el-button type="text" @click="onEdit(scope.row.id)" v-if="!(scope.row.data_status != 0 || scope.row.status == 3) && qxobj.save">编辑</el-button>
                    <el-button type="text" v-if="scope.row.data_status == 1" @click="onContractReconciliationDetail(scope.row.id)">详情</el-button>
                    <el-button type="text" size="default" @click="onExamine(scope.row.id)" v-if="scope.row.data_status == 1 && scope.row.status == 0 && qxobj.audit">审核</el-button>
                    <el-button type="text" v-if="scope.row.status != 1 && scope.row.status != 3 && qxobj.save" style="color: red" @click="onDelete(scope.row.id)">作废</el-button>
                </template>
            </el-table-column>
        </el-table>
        <pagination :form="form" :total="total" @paginationPostOrderTaskList="postAdminPricingGetReconciliationOrderList"/>
        <!-- 审核 -->
        <el-dialog title="审核" :visible.sync="auditdialogVisible" :lose-on-click-modal="false" width="30%">
            <div>
                <el-radio v-model="auditform.status" :label="1">通过</el-radio>
                <el-radio v-model="auditform.status" :label="0">拒绝</el-radio>
            </div>
            <span slot="footer" class="dialog-footer">
        <el-button @click="auditdialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="onExamineAuditAffirm">确 定</el-button>
      </span>
        </el-dialog>
        <!-- 审核 -->
        <el-dialog title="上传凭证" :visible.sync="paydialogVisible" :lose-on-click-modal="false" width="30%">
            <div>
                <el-upload action="https://ssy.13yu.com/index.php/Admin/Api/upload" list-type="picture-card" ref="uploadpay">
                    <i slot="default" class="el-icon-plus"></i>
                </el-upload>
            </div>
            <span slot="footer" class="dialog-footer">
        <el-button @click="paydialogVisible = false">取 消</el-button>
        <el-button :loading="loading" type="primary" @click="onPaySubmit">确 定</el-button>
      </span>
        </el-dialog>
    </div>
</template>

<script>
import {
    postAdminPricingGetReconciliationOrderList,
    postAdminPricingDelReconciliationOrder,
    postAdminPricingExamineReconciliationOrder,
    postHomeCodeGetFactory,
    postAdminPricingPayReconciliationOrder,
    postAdminPricingGetReconciliationOrderXHPushlList,
} from "@/api";
import pagination from "@/components/pagination.vue";
export default {
    components: { pagination },
    data() {
        return {
            qxobj: {},
            loading: false,
            auditdialogVisible: false,
            paydialogVisible: false,
            factoryList: [],
            options: [
                {
                    value: 0,
                    label: "待审核",
                },
                {
                    value: 1,
                    label: "已通过",
                },
                {
                    value: 2,
                    label: "未通过",
                },
                {
                    value: 3,
                    label: "已作废",
                },
            ],
            optionsSP: [
                {
                    value: "1",
                    label: "审批中",
                },
                {
                    value: "2",
                    label: "已通过",
                },
                {
                    value: "3",
                    label: "未通过",
                },
            ],
            optionspay: [
                {
                    value: "0",
                    label: "未付款",
                },
                {
                    value: "1",
                    label: "已付款",
                },
            ],
            form: {
                supplier_id: "",
                recon_time: "",
                flow_status: "",
                pay_status: "",
                status: 0,
                type: 1,
                page: 1,
                size: 10,
            },
            auditform: {
                status: 1,
            },
            tableData: [],
            total: 1,
            // 审核
            ExtraAudit: {
                id: "",
                status: 1,
            },

            selectIndex: 0,
            pushLoading: false,
        };
    },
    activated() {
        if (this.$route.query.qxobj) {
            this.qxobj = JSON.parse(this.$route.query.qxobj);
        }
        let form = this.form;
        this.postHomeCodeGetFactory();
        this.postAdminPricingGetReconciliationOrderList(form);
    },
    methods: {
        async onPaySubmit() {
            let { id, form } = this;
            this.loading = true;
            let uploadpay = this.$refs.uploadpay.uploadFiles;
            let pay_images = [];
            if (uploadpay && uploadpay.length) {
                uploadpay.forEach((e) => {
                    pay_images.push(e.response.img);
                });
            } else {
                this.loading = false;
                return this.$message.warning("请上传凭证");
            }
            let obj = {
                id,
                pay_images,
            };
            try {
                await postAdminPricingPayReconciliationOrder(obj);
                this.postAdminPricingGetReconciliationOrderList(form);
                this.$message.success("成功");
                this.paydialogVisible = false;
            } catch (error) {
                this.loading = false;
            }
        },
        onPay(id) {
            this.id = id;
            this.paydialogVisible = true;
        },
        // 审批进度
        onLookRun(id, type, run_id) {
            this.$router.push({ name: "contractrunid", query: { id, type, run_id } });
        },
        // 加工厂列表
        postHomeCodeGetFactory() {
            let obj = {
                type: 2,
                page: 1,
                size: 1000,
            };
            postHomeCodeGetFactory(obj).then((res) => {
                this.factoryList = res.data;
            });
        },
        handleSelectionChange(val) {
            this.multipleSelection = val;
        },
        // 确认审核
        onExamineAuditAffirm() {
            let { form, auditform } = this;
            postAdminPricingExamineReconciliationOrder(auditform).then((res) => {
                this.auditdialogVisible = false;
                let text;
                if (auditform.status == 1) {
                    text = "审核通过";
                } else {
                    text = "审核不通过";
                }
                this.$message(text);
                this.postAdminPricingGetReconciliationOrderList(form);
            });
        },
        // 审核
        onExamine(e) {
            this.auditform.id = e;
            this.auditdialogVisible = true;
        },
        // 详情
        onContractReconciliationDetail(Priceid) {
            this.$router.push({
                name: "ContractReconciliationDetailXH",
                query: { Priceid },
            });
        },
        // 删除
        onDelete(id) {
            this.loading = true;
            let form = this.form;
            let obj = {
                id,
            };
            this.$confirm("此操作将永久作废该对账单, 是否继续?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            })
                .then(() => {
                    postAdminPricingDelReconciliationOrder(obj).then((res) => {
                        this.postAdminPricingGetReconciliationOrderList(form);
                        this.$message({
                            type: "success",
                            message: "作废成功!",
                        });
                        this.loading = false;
                    });
                })
                .catch(() => {
                    this.$message({
                        type: "info",
                        message: "已取消作废",
                    });
                    this.loading = false;
                });
        },
        // 编辑
        onEdit(Priceid) {
            this.$router.push({
                name: "ContractReconciliationXH",
                query: { Priceid },
            });
        },
        // 新建对账单
        onNewReconciliation() {
            this.$router.push({
                name: "ContractReconciliationXH",
                query: { type: "addnew" },
            });
        },
        //推送
        pushReconciliationBtn(index, row){
            this.selectIndex = index;
            this.pushLoading = true;
            this.$confirm("【绣花对账单】推送金蝶, 请确认数据是否正确?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            }).then(() => {
                postAdminPricingGetReconciliationOrderXHPushlList({id: row.id}).then((res) => {
                    this.pushLoading = false;
                    if(res.code === 0){
                        this.$message.success("推送成功");
                        this.postAdminPricingGetReconciliationOrderList(this.form);
                    }else{
                        this.$message.error(res.msg);
                    }
                }).catch(()=>{
                    this.pushLoading = false;
                })
            }).catch(() => {
                this.pushLoading = false;
            });

        },
        // 采购列表
        async postAdminPricingGetReconciliationOrderList(data) {
            this.loading = true;
            this.form = data;
            postAdminPricingGetReconciliationOrderList(data)
                .then((res) => {
                    this.loading = false;
                    console.log("采购列表", res);
                    this.tableData = res.data;
                    this.total = Number(res.total);
                })
                .catch((err) => {
                    this.loading = false;
                });
        },
        // 搜索
        onSearch() {
            this.form.page = 1;
            this.form.size = 10;
            this.postAdminPricingGetReconciliationOrderList(this.form);
        },
    },
};
</script>

<style lang="scss" scoped>
.myform {
    display: flex;
    justify-content: space-between;
    > div {
        display: flex;
    }
    &-item {
        margin-right: 10px;
    }
}
.WorkingSchedule {
    background: #ffff;
    padding: 20px;
    border-radius: 2px;
    @include boxShadow;
}
</style>
